<template>
  <div class="dashboard-container">
    <header>
      <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input
            v-model="searchFrom.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </header>
    <main>
      <div style="display: flex; justify-content: flex-end; margin-right: 65px">
        <el-button type="success" @click="toAdd()">新增</el-button>
      </div>

      <el-table :data="tableData">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="toperMission(scope.row)"
              type="primary"
              size="small"
              >权限分配</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <el-dialog
      title="新增角色"
      :visible="visible"
      :before-close="cancel"
      width="30%"
      :destroy-on-close="true"
    >
      <el-input v-model="addForm.name" placeholder="请输入角色名"></el-input>
      <el-input
        v-model="addForm.description"
        placeholder="请输入角色描述"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addOk()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="权限分配"
      :visible="pmvisible"
      :before-close="pmCancel"
      width="40%"
      :destroy-on-close="true"
    >
      <el-transfer
        v-model="value"
        :data="permissions"
        @right-check-change="leftChange"
        @left-check-change="rightChange"
        @change="change"
      ></el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pmCancel">取 消</el-button>
        <el-button type="primary" @click="pmConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  createRole,
  assignPermissions,
  getPermissionsOptions,
  getRoleList,
} from "@/api/role";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  components: {},
  data() {
    return {
      visible: false,
      pmvisible: false,
      pmname: "",
      searchFrom: {
        name: undefined,
        currentPage: 1,
        pageSize: 100,
      },
      addForm: {
        name: "",
        description: "",
      },
      tableData: [],
      permissions: [],
      assignpermissionForm: {
        roleId: "",
        assignedIds: [], //勾选的权限
        unassignedIds: [], //取消勾选的权限
      },
      value: [],
    };
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    getPermissionsOptions(id) {
      getPermissionsOptions({ id: id }).then((res) => {
        console.log(res);
        // this.permissions = res.data.permissions;
        this.permissions = [];
        res.data.permissions.forEach((element) => {
          let obj = {
            key: element.id,
            label: element.description,
          };
          this.permissions.push(obj);
        });
        this.value = res.data.assignedPermissionIds;
      });
    },
    getRoleList() {
      getRoleList(this.searchFrom).then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    toAdd() {
      this.visible = true;
    },
    addOk() {
      if (this.addForm.name == "" || this.addForm.description == "") {
        this.$message({
          message: "用户名或用户描述不能为空",
          type: "error",
        });
        return;
      }
      createRole(this.addForm).then((res) => {
        console.log(res);
        this.getRoleList();
        this.visible = false;
      });
    },
    toEdit(row) {
      this.editID = row.id;
      console.log(row);
      this.title = "编辑";
      this.visible = true;
    },
    toperMission(row) {
      this.assignpermissionForm.roleId = row.id;
      this.pmvisible = true;
      this.getPermissionsOptions(row.id);
    },
    cancel() {
      this.visible = false;
    },
    pmCancel() {
      this.pmvisible = false;
    },
    pmConfrim() {
      this.pmvisible = false;
      console.log(this.assignpermissionForm);
    },
    leftChange(e) {
      console.log(e);
    },
    rightChange(e) {
      console.log(e);
    },
    change(a, b, c) {
      console.log(a, b, c);
      if (b == "right") {
        this.assignpermissionForm.assignedIds = c;
      } else if (b == "left") {
        this.assignpermissionForm.unassignedIds = c;
      }
      assignPermissions(this.assignpermissionForm).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: "权限分配成功",
            type: "success",
          });
        }
      });
    },
    onSubmit() {
      console.log(this.searchFrom);
      this.getRoleList();
    },
    reset() {
      this.searchFrom = {
        name: undefined,
        currentPage: 1,
        pageSize: 100,
      };
      this.getRoleList();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
